<template>
  <!-- MemberCouponDetails 福利券详情 -->
  <PageContainer>
    <view class="container">
      <Header title="详情" />
      <FullLoading :full-loading="loading" />
      <CouponItem
        :img="detailsData?.couponCover"
        :title="detailsData?.name"
        :times="[
          {
            label: '有效时间',
            value: `${detailsData?.validityStartTime} - ${detailsData?.validityEndTime}`,
          },
        ]"
        :show-item-bottom="!isMyCoupon && isUnreceived"
        :margin-bottom="!isMyCoupon && isUnreceived ? '30rpx' : '0'"
      >
        <template #itemBottom>
          <view class="btn-group">
            <button class="btn" type="none" @click="toReceive">立即领取</button>
          </view>
        </template>
      </CouponItem>
      <view
        v-if="!isMyCoupon && detailsData?.status === MemberCouponStatusEnum.RECEIVED"
        class="coupon-code"
      >
        <text class="coupon-code__title">使用凭证</text>
        <Loading v-model="lPainterLoading">
          <view class="code-view">
            <view v-if="showCodeDisabled" class="code-disabled">
              <image
                v-if="detailsData?.couponOrderStatus === CouponOrderStatusEnum.USED"
                class="used-icon"
                src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/floatIcon/used-icon.png"
              />
              <image v-else class="used-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/floatIcon/finished-icon.png" />
            </view>
            <LPainter :type="canvasType" @done="lPainterSuccess">
              <LpainterQrcode
                :text="detailsData?.verificationCode"
                css="width: 400rpx; height: 400rpx;"
              />
            </LPainter>
          </view>
        </Loading>
      </view>
      <view class="model-title">
        <text>发券人信息</text>
      </view>
      <view class="member-info" @click="toCard">
        <view class="avatar">
          <TImage
            :src="detailsData?.leadingAvatar"
            width="108rpx"
            height="128rpx"
            border-radius="10rpx"
          />
        </view>
        <view class="member-info__text">
          <view class="member-info__text-top">
            <view class="top-left">
              <text class="member-name text-overflow-1">{{ detailsData?.leadingName }}</text>
              <text class="member-level">{{ detailsData?.levelName }}</text>
            </view>
            <image class="card-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-12.png" />
          </view>
          <view class="member-info__text-bot">
            <text class="text-overflow-1">{{ detailsData?.memberName }}</text>
            <text class="member-post">{{ detailsData?.leadingSocialPosition }}</text>
          </view>
        </view>
      </view>
      <view class="intro">
        <text user-select class="intro-text">{{ detailsData?.introduction }}</text>
        <view class="intro-img">
          <TImage
            :src="detailsData?.explainUrl"
            :preview="true"
            width="100%"
            height="auto"
            mode="widthFix"
          />
        </view>
      </view>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  MemberCouponDetails  福利券详情 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import CouponItem from '../components/CouponItem.vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateBack, navigateTo, onLoad, redirectTo } from '@/router';
  import { computed, ref, unref } from 'vue';
  import { memberCouponDetails, receiveCoupon } from '@/api/memberCoupon';
  import { type MemberCouponDetailsResult } from '@/api/memberCoupon/types';
  import FullLoading from '@/components/FullLoading/index.vue';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { CouponOrderStatusEnum, MemberCouponStatusEnum } from '@/enums/memberCouponEnum';
  import LPainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue';
  import LpainterQrcode from '@/uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue';
  import Loading from '@/components/Loading/index.vue';
  import { type MemberCouponDetails } from '@/router/types/modules';
  import { useAppStoreWithOut } from '@/store/modules/app';

  const { cocInfo } = useUserStoreWithOut();
  const { canvasType } = useAppStoreWithOut();

  const isMyCoupon = computed(() => cocInfo.id === detailsData.value?.leadingId);
  const isUnreceived = computed(
    () => detailsData.value?.status === MemberCouponStatusEnum.UNRECEIVED,
  );

  const showCodeDisabled = computed(() => {
    if (!detailsData.value) return false;
    const { status, couponOrderStatus } = detailsData.value;
    return (
      status === MemberCouponStatusEnum.FINISHED ||
      couponOrderStatus === CouponOrderStatusEnum.USED ||
      couponOrderStatus === CouponOrderStatusEnum.EXPIRED
    );
  });

  const id = ref<number>();
  const detailsData = ref<MemberCouponDetailsResult>();
  const loading = ref(true);
  function getDetails() {
    id.value &&
      memberCouponDetails(id.value)
        .then((r) => {
          detailsData.value = r;
          loading.value = false;
        })
        .catch(() => setTimeout(() => navigateBack(), 1500));
  }

  const isShare = ref<boolean>(false);
  let success: MemberCouponDetails['success'];
  onLoad<'MemberCouponDetails'>((op) => {
    op.isShare && (isShare.value = op.isShare);
    id.value = op.id;
    success = op.success;
    getDetails();
  });

  /** 领取优惠券 */
  function toReceive() {
    id.value &&
      receiveCoupon({
        couponId: id.value,
        isShare: isShare.value,
        num: 1,
      }).then(() => {
        success?.();
        redirectTo({
          name: 'receiveCouponResult',
          options: {
            id: unref(id),
            isShare: unref(isShare),
          },
        });
      });
  }

  /** 跳转名片 */
  function toCard() {
    navigateTo({ name: 'personCard', options: { id: detailsData.value?.leadingId } });
  }

  /** 二维码绘制成功 */
  const lPainterLoading = ref(true);
  function lPainterSuccess(url: string) {
    console.log('二维码绘制成功');
    lPainterLoading.value = false;
  }
</script>

<style lang="scss" scoped>
  .btn-group {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn {
      width: 142rpx;
      height: 42rpx;
      background: #e9e3b5;
      border-radius: 10rpx;
      line-height: 42rpx;
      text-align: center;
      color: #333333;
      font-size: 24rpx;
      margin-left: 20rpx;
    }
  }
  .coupon-code {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    background-color: #fff;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    &::after {
      content: '';
      position: absolute;
      left: 30rpx;
      top: 0;
      width: calc(100vw - 60rpx);
      height: 1px;
      background-color: #dddddd;
    }
    &__title {
      font-size: 32rpx;
      color: #333;
      padding: 34rpx 0;
    }
    .code-view {
      width: 400rpx;
      height: 400rpx;
      position: relative;
      .code-img {
        width: 100%;
        height: 100%;
      }
      .code-disabled {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: #fff, $alpha: 0.8);
        .used-icon {
          width: 150rpx;
          height: 150rpx;
        }
      }
    }
  }

  .model-title {
    height: 88rpx;
    background-color: #fff;
    margin-bottom: 2rpx;
    line-height: 88rpx;
    padding-left: 30rpx;
    font-size: 28rpx;
    color: #333;
  }

  .member-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    background-color: #fff;
    margin-bottom: 2rpx;
    .avatar {
      width: 108rpx;
      flex-shrink: 0;
      margin-right: 30rpx;
    }
    &__text {
      height: 128rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #333;
      &-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top-left {
          display: flex;
          align-items: center;
        }
        .member-name {
          font-size: 32rpx;
          font-weight: bolder;
        }
        .member-level {
          margin-left: 14rpx;
          padding: 0 12rpx;
          background-color: #ece2c6;
          border-radius: 100rpx;
          font-size: 24rpx;
          flex-shrink: 0;
        }
        .card-icon {
          width: 40rpx;
          height: 26rpx;
          flex-shrink: 0;
          margin-left: 10rpx;
        }
      }
      &-bot {
        font-size: 28rpx;
        display: flex;
        align-items: center;
        .member-post {
          margin-left: 30rpx;
          flex-shrink: 0;
        }
      }
    }
  }

  .intro {
    padding: 30rpx;
    color: #333;
    font-size: 28rpx;
    background-color: #fff;
    &-img {
      margin-top: 30rpx;
    }
  }
</style>
